/* eslint-disable react/display-name */
import { ReactElement, Suspense } from 'react';

import { RouteConfig } from '..';
import { AuthInterceptor } from './Auth';
import { TitleInterceptor } from './Title';
export interface RouterInterceptorsProps {
  children: ReactElement;
  route: RouteConfig;
}

export const RouterInterceptors: React.FC<RouterInterceptorsProps> = [
  TitleInterceptor,
  AuthInterceptor
].reduce(
  (Prev, Curr) => {
    return ({ children, ...others }) => (
      <Prev {...others}>
        <Curr {...others}>{children}</Curr>
      </Prev>
    );
  },
  ({ children }) => <Suspense>{children}</Suspense>
);

RouterInterceptors.displayName = 'RouterInterceptor';
